<template>
  <div class="table-indexes-panel-v2">
    <div class="max-w-6xl mx-auto">
      <!-- 头部 -->
      <div class="panel-header mb-6">
        <div class="flex items-center justify-between">
          <div>
            <h3 class="text-lg font-semibold text-gray-800">索引管理</h3>
            <p class="text-sm text-gray-500 mt-1">添加索引可以提高查询性能</p>
          </div>
          <el-button type="primary" @click="addIndex">
            <el-icon><Plus /></el-icon>
            添加索引
          </el-button>
        </div>
      </div>

      <!-- 索引列表 -->
      <div class="indexes-list space-y-4">
        <div
          v-for="(index, idx) in localIndexes"
          :key="index._id || idx"
          class="index-card bg-white rounded-lg shadow-sm border border-gray-200 p-4"
        >
          <div class="flex items-start justify-between">
            <div class="flex-1">
              <div class="flex items-center space-x-3 mb-3">
                <el-input
                  v-model="index.name"
                  placeholder="索引名称"
                  class="w-64"
                  @change="handleChange"
                />
                <el-select
                  v-model="index.type"
                  placeholder="索引类型"
                  class="w-40"
                  @change="handleChange"
                >
                  <el-option label="普通索引" value="INDEX" />
                  <el-option label="唯一索引" value="UNIQUE" />
                  <el-option label="全文索引" value="FULLTEXT" v-if="databaseType === 'mysql'" />
                  <el-option label="空间索引" value="SPATIAL" v-if="databaseType === 'mysql'" />
                </el-select>
              </div>
              
              <div class="flex items-center space-x-3">
                <span class="text-sm text-gray-600">包含列：</span>
                <el-select
                  v-model="index.columns"
                  multiple
                  placeholder="选择列"
                  class="flex-1"
                  @change="handleChange"
                >
                  <el-option
                    v-for="col in columns"
                    :key="col.name"
                    :label="col.name"
                    :value="col.name"
                  >
                    <span>{{ col.name }}</span>
                    <span class="text-xs text-gray-400 ml-2">{{ col.type }}</span>
                  </el-option>
                </el-select>
              </div>
              
              <div class="mt-3">
                <el-input
                  v-model="index.comment"
                  placeholder="索引注释"
                  size="small"
                  @change="handleChange"
                />
              </div>
            </div>
            
            <el-button
              type="danger"
              link
              @click="removeIndex(idx)"
              class="ml-4"
            >
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
        </div>
        
        <!-- 空状态 -->
        <div v-if="localIndexes.length === 0" class="empty-state text-center py-12">
          <el-icon class="text-4xl text-gray-300 mb-2"><Grid /></el-icon>
          <p class="text-gray-500">还没有添加任何索引</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Plus, Delete, Grid } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  indexes: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  databaseType: {
    type: String,
    default: 'mysql'
  }
})

const emit = defineEmits(['update'])

const localIndexes = ref([])

watch(() => props.indexes, (newIndexes) => {
  localIndexes.value = newIndexes.map((index, idx) => ({
    ...index,
    _id: index._id || `idx_${Date.now()}_${idx}`
  }))
}, { immediate: true, deep: true })

const addIndex = () => {
  const newIndex = {
    _id: `idx_${Date.now()}`,
    name: `idx_${props.columns[0]?.name || 'table'}_${localIndexes.value.length + 1}`,
    type: 'INDEX',
    columns: [],
    comment: ''
  }
  localIndexes.value.push(newIndex)
  emitUpdate()
}

const removeIndex = (index) => {
  ElMessageBox.confirm('确定要删除这个索引吗？', '删除确认', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localIndexes.value.splice(index, 1)
    emitUpdate()
  }).catch(() => {})
}

const handleChange = () => {
  emitUpdate()
}

const emitUpdate = () => {
  emit('update', localIndexes.value.map(index => {
    const { _id, ...indexData } = index
    return indexData
  }))
}
</script>

<style lang="scss" scoped>
.table-indexes-panel-v2 {
  .index-card {
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 